<template>
	<view>
		<view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import { base64ToPath } from '@/components/qrcode/image-tools.js'
	export default {
		name: 'html2canvas',
		props: {
			domId: {
				type: String|Number,
				required: true
			}
		},
		methods: {
			async renderFinish(base64) {
				try{
					const imgPath = await base64ToPath(base64, '.jpeg');
					this.$emit('renderFinish', imgPath);
				}catch(e){
					this.$emit('renderError', e);
				}
			},
			renderError(e){
				this.$emit('renderError', e);
			},
			showLoading() {
				
				
				
				
				
				
			},
			hideLoading() {
				
			}
		}
	}
</script>

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	methods: {
		async create(domId) {
			try {
				this.$ownerInstance.callMethod('showLoading', true);
				await new Promise((resolve)=>{
					setTimeout(resolve,500)
				})
				const shareContent = document.querySelector('#poster');
				console.dir(shareContent)
				const canvas = await html2canvas(shareContent,{
					width: shareContent.offsetWidth,
					height: shareContent.offsetHeight,
					logging: true,
					useCORS: true
				});
				console.dir(canvas)
				const base64 = canvas.toDataURL('image/jpeg', 1);
				this.$ownerInstance.callMethod('renderFinish', base64);
				this.$ownerInstance.callMethod('hideLoading', true);
			} catch(error){
				this.$ownerInstance.callMethod('renderError', error);
				console.log(error)
			}
		}
	}
}
</script>


<style lang="scss">

</style>
